<template>
    <div id="register">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
         <div class="form">
            <div class="form-item">
                <span class="label">
                    <i class="icon icon-user"></i>
                    用户名
                </span>
                <input type="text" name="userAccount" placeholder="字母开头6-16位字母或数字组成" v-model="userAccount" autocomplete="off">
            </div>
            <div class="form-item">
                 <span class="label">
                    <i class="icon icon-pwd"></i>
                    密码
                </span>
                <input :type="pswType==true?'password':'text'"  class="password" name="password" placeholder="6-16位字母或数字组成" v-model="password1" autocomplete="off"  @keyup="password1=password1.replace(/[\u4e00-\u9fa5]/g,'')">
                <span class="showPwd pwdType" v-show="!pswType" @click="changePwd"></span>
                <span class="hidePwd pwdType" v-show="pswType" @click="changePwd"></span>
            </div>
            <div class="form-item">
                 <span class="label">
                    <i class="icon icon-pwd"></i>
                    确认
                </span>
                <input :type="pswType==true?'password':'text'"  class="password" name="password2" placeholder="请再次输入密码" v-model="password2" autocomplete="off"  @keyup="password2=password2.replace(/[\u4e00-\u9fa5]/g,'')">
                <span class="showPwd pwdType" v-show="!pswType" @click="changePwd"></span>
                <span class="hidePwd pwdType" v-show="pswType" @click="changePwd"></span>
            </div>
            <div class="agreement">
                <label :class="{active:checked}" @click="checkBox"><i></i>注册即同意</label>
                <span @click="openAgreement">《用户协议》</span>
            </div>
            <div class="button">
                <button @click="loginSubmit" :class="{'btndisabled':!checked}">立即注册</button>
                <div class="more">
                    <router-link tag="a" to='./phoneRegister' replace>手机快速注册</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import { Toast } from 'vant';
    import {userReg,login} from 'api/login';
    import api from 'api/api';
    import {mapMutations} from 'vuex'
    export default {
        data(){
            return{
                title:"用户名注册（不推荐）",
                userAccount:'',
                password1:'',
                password2:'',
                pswType:true,
                type:2,
                checked:true,
            }
        },
        methods:{
            back(){
                 this.$router.go(-1);
            },
            changePwd(){
                this.pswType=!this.pswType;
            },
            checkBox(){
                this.checked=!this.checked;
            },
            openAgreement(){
                window.location.href="http://mapi.17byh.com/agreement.html"
            },
            loginSubmit(){
                if(this.checked==false){
                    Toast("请勾选用户协议");
                    return;
                }
                else if(this.userAccount.length==0){
                    Toast("请输入账号");
                    return;
                }else if(this.password1.length==0){
                    Toast("请输入密码");
                    return;
                }else if(this.password1!==this.password2){
                    Toast("两次密码输入不一致");
                    return;
                }else{
                    userReg(2,"",this.userAccount,this.password1,"").then(res=>{
                        if(res.data.error==0){
                            login(this.userAccount,this.password1).then(res=>{
                                if(res.data.error==0){
                                    this.SET_LOGININFO(res.data.content);
                                    this.$router.push({
                                        path: '/index'
                                    });
                                }
                            })
                        }
                    })
                }
            },
             ...mapMutations(['SET_LOGININFO'])
        },
        components:{
            navbar
        },
        destroyed(){
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins';
.btndisabled{
    background:#ddd !important;
}
.placeholder{
    width:100%;
    height:0.8rem;
}
#register{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    z-index:1000;
    width: 7.5rem;
    margin:0 auto;
    overflow-y:scroll;
    .form{
         margin-top:0.6rem;
          .form-item{
             position:relative;
             margin: 0.3rem auto 0;
             padding:0 0.2rem 0 1.7rem;
             width: 6.64rem;
             height: 0.9rem;
             line-height: 0.9rem;
             border: 1px solid #cbcbcb;
             border-radius: 10px; 
             &:last-child{
                 margin:0 auto;
             }
             input{
                width:100%;
                height:0.9rem;
                line-height:100%;
                padding-left:0.12rem;
                border:none;
                box-sizing: border-box;
                font-size:$font-size-m;
                background: transparent;
            }
            .password{
               padding-right:0.6rem;
            }
            .pwdType{
                position: absolute;
                top: 50%;
                right: 0.2rem;
                transform: translateY(-50%);
            }
            .showPwd{
                width:0.37rem;
                height:0.24rem;
                background-size: 0.37rem 0.24rem;
                @include bg-image('../../assets/image/icon_codezs');
            }
            .hidePwd{
                width:0.44rem;
                height:0.20rem;
                margin-top:0.05rem;
                background-size: 0.44rem 0.20rem;
                @include bg-image('../../assets/image/icon_code');
            }
            .phoneCode{
                width:2.6rem;
            }
             .label{
                 position:absolute;
                 top:50%;
                 transform: translateY(-50%);
                 left:0.3rem;
                 font-size:$font-size-m;
                 color:$color-text;
                 .icon{
                     display:inline-block;
                     margin-right:0.1rem;
                     background-size:100% 100%;
                     background-repeat: no-repeat;
                     vertical-align: top;
                     &.icon-user{
                        width:0.4rem;
                        height:0.46rem;
                        margin-top:0.21rem;
                        @include bg-image('../../assets/image/icon_yhm');
                     }
                     &.icon-code{
                        width:0.36rem;
                        height:0.45rem;
                        margin-top:0.22rem;
                        @include bg-image('../../assets/image/icon_yzm');
                     }
                     &.icon-pwd{
                         width:0.38rem;
                         height:0.42rem;
                         margin-top:0.24rem;
                         @include bg-image('../../assets/image/icon_mima');
                     }
                 }
             }
             .getCodeBtn{
                 position:absolute;
                 top:50%;
                 right:0.18rem;
                 transform:translateY(-50%);
                 button{
                     width:1.6rem;
                     height:0.5rem;
                     line-height:0.5rem;
                     font-size:0.24rem;
                     color:#fff;
                     background:$color-focus;
                     border:none;
                     border-radius:0.25rem;
                     &:disabled{
                         background:#ddd;
                         color:#f9f9f9;
                     }
                 }
             }
         }
         .button{
             width:6.6rem;
             margin:0.8rem auto 0 auto;
            button{
               @include login-btn();
            }
            .more{
                 text-align:right;
                 margin-top:0.2rem;
                 padding-right:0.2rem;
                 font-size:$font-size-m;
                 a{
                     color:$color-focus;
                 }
            }
         }
     }
     .agreement{
         margin:0.16rem 0 0 0.4rem;
         label{
             i{
                vertical-align: top;
                display:inline-block;
                margin-right:0.1rem;
                width:0.32rem;
                height:0.32rem;
                background-size:100% 100%;
                @include bg-image('../../assets/image/btn_unpre');
            }
            &.active{
                i{
                    @include bg-image('../../assets/image/btn_pre');
                }
            }
         }
         span{
            color:$color-focus;
        }
     }
}
</style>